<template>
  <view class="order-pop">
    <uni-popup
      ref="messagePop"
      type="bottom"
      border-radius="10px 10px 0 0"
      background-color="#fff"
      @maskClick="closePop"
    >
      <view class="order-detail">
        <text style="padding: 20rpx 0; border-bottom: 1rpx solid #e5e5e5">联系信息</text>
        <view class="memberCard">
          <view class="fields-item">
            <view class="fields-left"><text style="color: red">*</text>称呼：</view>
            <view class="fields-right">
              <input
                class="inquire-input"
                type="text"
                v-model="inquireMesObj.name"
                placeholder="姓名"
              />
            </view>
          </view>
          <view class="fields-item" @tap="isFalse = true">
            <view class="fields-left"><text style="color: red">*</text>联系方式：</view>
            <view class="fields-right">
              <input
                type="text"
                class="inquire-input"
                v-model="inquireMesObj.phone"
                @blur="validPhone"
                :focus="isFalse"
                placeholder="请填写联系方式"
              />
            </view>
          </view>
          <view class="fields-item" @tap="chooseLocation">
            <view class="fields-left"><text style="color: red">*</text>具体地址：</view>
            <view class="fields-right">
              <text style="color: #808080">{{
                inquireMesObj.address ? inquireMesObj.address : '请选择'
              }}</text>
              <text class="t-icon t-icon-jinru" v-if="!inquireMesObj.address"></text>
            </view>
          </view>

          <view class="fields-item">
            <view class="fields-left"><text style="color: red">*</text>详细地址：</view>
            <view class="fields-right">
              <input
                type="text"
                class="inquire-input"
                v-model="inquireMesObj.specific"
                placeholder="详细地址"
              />
            </view>
          </view>

          <view class="fields-item">
            <view class="fields-left"><text style="color: red">*</text>备注：</view>
            <view class="fields-right">
              <input
                type="text"
                class="inquire-input"
                v-model="inquireMesObj.remark"
                placeholder="请简短填写"
              />
            </view>
          </view>
          <button type="primary" class="submit-btn" @tap="submitInquire">提交咨询</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { checkPhone } from '@/utils'
import { ref, watch } from 'vue'

const isFalse = ref<boolean>(false) //是否input聚焦
const messagePop = ref()
const emit = defineEmits(['closeDialogLr'])

const inquireMesObj = ref({
  name: '',
  phone: '',
  address: '',
  specific: '',
  remark: '',
})

const pops = withDefaults(defineProps<{ isShowPop: boolean }>(), {
  isShowPop: false,
})

watch(
  () => pops.isShowPop,
  (newValue: any) => {
    console.log(newValue, 'ssss')
    if (newValue) messagePop.value?.open()
  },
)

const chooseLocation = () => {
  wx.chooseLocation({
    success: (res) => {
      inquireMesObj.value.address = res.address
      console.log(res, 'res')
    },
    fail: (res: any) => {
      console.log(res, 'res')
    },
  })
}

// 验证手机号
const validPhone = () => {
  const res = checkPhone(inquireMesObj.value.phone)
  if (!res) {
    uni.showToast({
      title: '请填写正确的手机号',
      icon: 'none',
    })
  }
}

// 提交咨询信息
const submitInquire = () => {
  console.log(inquireMesObj, 'inquireMesObj')
  if (inquireMesObj.value.name && inquireMesObj.value.phone) {
    uni.showToast({
      title: '提交成功',
    })
    messagePop.value?.close()
  } else {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    })
  }
}

// 弹窗关闭
const closePop = () => {
  console.log('弹窗关闭')
  emit('closeDialogLr')
}
</script>

<style lang="scss" scoped>
// 订单弹窗
.order-pop {
  .order-detail {
    // height: 936rpx;
    overflow: hidden;
    overflow: auto;
    display: flex;
    flex-direction: column;

    padding: 20rpx 20rpx 40rpx 20rpx;
    border-radius: 22rpx 22rpx 0 0;

    .memberCard {
      background-color: #ffffff;
      margin-top: 20rpx;
      border-radius: 22rpx;
      padding: 0 20rpx;
      .fields-item {
        font-size: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;

        border-bottom: 1rpx solid #f1f1f1;
        .fields-left {
          width: 180rpx;
        }
        .fields-right {
          display: flex;
          flex: 1;
          justify-content: flex-end;
          text-align: right;
          align-items: center;

          .inquire-input {
            width: 100%;
          }
        }
      }
      .submit-btn {
        // padding-top: 20rpx;
        margin-top: 20rpx;
        border-radius: 5000rpx;
      }
    }
    .bottom-bar {
      position: fixed;
      z-index: 9999999;
      width: 100%;
      bottom: 0;
      left: 0;
      padding-bottom: env(safe-area-inset-bottom);
      display: flex;
      align-items: center;
      .price-box {
        padding: 0 10rpx;
        .text-price {
          color: #f11d27;
        }
        .fuhao {
          font-size: 28rpx;
          padding-right: 10rpx;
        }
      }
      .button-box {
        flex: 1;
        margin: 10rpx 0;
        padding: 0rpx 20rpx;
        .button-one {
          width: 100%;
          background-color: #f11d27;
          color: #ffffff;
          border-radius: 46rpx;
        }
      }
    }
  }
}
</style>
